<template>
  <div class="Activity">
    <ShowBanner class="white"></ShowBanner>
    <!-- <div class="showBanner">{{type === 'edit' ? '修改活动' : '添加活动'}}</div> -->
    <el-form
      ref="activityForm"
      :rules="activityRules"
      :model="activityForm"
      :label-position="labelPosition"
      :inline="true"
      label-width="150px"
      @submit.native.prevent
      validate-on-rule-change
      style="margin-top:20px;"
    >
      <el-form-item
        label="活动标题："
        prop="title"
      >
        <template>
          <el-input
            v-model="activityForm.title"
            maxlength="100"
            style="width:560px;margin-top:-8px;"
            placeholder="请输入活动标题"
          ></el-input>
        </template>
      </el-form-item><br>
      <el-form-item
        label="副标题："
        prop="subtitle"
      >
        <template>
          <el-input
            v-model="activityForm.subtitle"
            maxlength="100"
            style="width:560px;margin-top:-8px;"
            placeholder="请输入副标题"
          ></el-input>
        </template>
      </el-form-item><br>
      <el-form-item
        label="空间："
        prop="space"
      >
        <template>
          <el-input
            v-model="activityForm.space"
            maxlength="100"
            style="width:560px;margin-top:-8px;"
            placeholder="请输入空间相关联手机号"
          ></el-input>
        </template>
      </el-form-item><br>
      <el-form-item
        label="活动时间："
        prop="activityTime"
      >
        <template>
          <el-date-picker
            v-model="activityForm.activityTime"
            type="daterange"
            style="width:560px;margin-top:-8px;"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </template>
      </el-form-item><br>
      <el-form-item
        label="有效期："
        prop="validity"
      >
        <template>
          <el-date-picker
            v-model="activityForm.validity"
            type="daterange"
            style="width:560px;margin-top:-8px;"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </template>
      </el-form-item><br>
      <el-form-item
        label="现价："
        prop="price"
      >
        <template>
          <el-input
            v-model="activityForm.price"
            maxlength="100"
            style="width:200px;margin-top:-8px;"
            placeholder="请输入价格"
          ></el-input>
        </template>
      </el-form-item>
      <el-form-item
        label="原价："
        prop="originalPrice"
      >
        <template>
          <el-input
            v-model="activityForm.originalPrice"
            maxlength="100"
            style="width:200px;margin-top:-8px;"
            placeholder="请输入价格"
          ></el-input>
        </template>
      </el-form-item><br>
      <el-form-item
        label="总量："
        prop="total"
      >
        <template>
          <el-input
            v-model="activityForm.total"
            maxlength="100"
            style="width:200px;margin-top:-8px;"
            placeholder="请输入总量"
          ></el-input>
        </template>
      </el-form-item>
      <el-form-item
        label="单用户起售："
        prop="startAt"
      >
        <template>
          <el-input
            v-model="activityForm.startAt"
            maxlength="100"
            style="width:200px;margin-top:-8px;"
            placeholder="请输入单用户起售数"
          ></el-input>
        </template>
      </el-form-item>
      <el-form-item
        label="单用户限购："
        prop="purchasing"
      >
        <template>
          <el-input
            v-model="activityForm.purchasing"
            maxlength="100"
            style="width:200px;margin-top:-8px;"
            placeholder="请输入单用户限购数"
          ></el-input>
        </template>
      </el-form-item><br>
      <el-form-item
        label="佣金："
        prop="commission"
      >
        <template>
          <el-radio-group v-model="commission">
            <el-radio :label="1">佣金比例</el-radio>
            <el-input
              v-model="activityForm.commissionRatio"
              v-if="commission===1"
              type="number"
              style="width:100px;margin-top:-8px;margin-right:20px;margin-left:10px"
            ></el-input><el-button v-if="commission===1" type="text" style="margin-left:-10px;color: #606266">%</el-button>
            <el-radio
              :label="2"
              style="margin-left:50px;"
            >固定佣金</el-radio>
            <el-input
              v-model="activityForm.fixedCommission"
              v-if="commission===2"
              type="number"
              style="width:100px;margin-top:-8px;margin-left:10px"
            ></el-input><el-button v-if="commission===2" type="text" style="margin-left:10px;color: #606266">元</el-button>
          </el-radio-group>
        </template>
      </el-form-item><br>
      <el-form-item
        label="首页图："
        prop="cover"
        ref="cover"
        style="margin-top:60px"
      >
        <div class="uploadBox">
          <el-upload
            :action="uploadImgUrl"
            :show-file-list="false"
            name="items"
            :on-success="handleCoverSuccess"
            :before-upload="beforeCoverUpload"
            style="margin-top:-50px;margin-left:0px"
          >
            <img
              v-if="imgUrlCover"
              :src="imgUrlCover"
              class="avatar"
            >
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="line-height:150px"
            ></i>
          </el-upload>
          <span
            v-if="imgLoadCover"
            style="font-size:12px;color: #ff7875"
          >图片上传中，请耐心等待</span>
        </div>
      </el-form-item><br>
      <el-form-item
        label="分享页图："
        prop="shareCover"
        ref="shareCover"
        style="margin-top:60px"
      >
        <div class="uploadBox">
          <el-upload
            :action="uploadImgUrl"
            :show-file-list="false"
            name="items"
            :on-success="handleshareCoverSuccess"
            :before-upload="beforeshareCoverUpload"
            style="margin-top:-50px;margin-left:0px"
          >
            <img
              v-if="imgUrlshareCover"
              :src="imgUrlshareCover"
              class="avatar"
            >
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="line-height:150px"
            ></i>
          </el-upload>
          <span
            v-if="imgLoadshareCover"
            style="font-size:12px;color: #ff7875"
          >图片上传中，请耐心等待</span>
        </div>
      </el-form-item><br>
      <el-form-item
        label="图文介绍："
        prop="graphicIntroduction"
      >
        <div class="quill-wrap">
          <quill-editor
            v-model="activityForm.graphicIntroduction"
            style="width:1000px;height:500px"
            ref="myQuillEditor"
            :options="editorOption"
          >
          </quill-editor>
        </div>
      </el-form-item><br>
      <el-form-item
        label="使用规则："
        prop="useRules"
        style="margin-top:80px"
      >
        <el-input
          type="textarea"
          style="width:700px;margin-top:-8px;"
          :rows="7"
          v-model="activityForm.useRules"
          placeholder="使用规则每一项请用中文句号结尾"
        ></el-input>
        <el-input
          type="text"
          style="display:none"
        ></el-input>
      </el-form-item><br>
      <el-form-item
        label="注意事项："
        prop="attention"
      >
        <el-input
          type="textarea"
          style="width:700px;margin-top:-8px;"
          :rows="7"
          v-model="activityForm.attention"
          placeholder="注意事项每一项请用中文句号结尾"
        ></el-input>
        <el-input
          type="text"
          style="display:none"
        ></el-input>
      </el-form-item><br>
      <el-form-item label="虚拟评价：">
        <div
          class="invent"
          v-for="(item, index) in activityForm.virtualEvaluation"
          :key="index"
        >
          <div class="user">
            <img
              :src="assessPhoto"
              alt=""
            >
            <div class="userTitle">
              <span class="title">{{item.name}}</span>
              <span class="date">{{item.evaluationTime}}</span>
            </div>
          </div>
          <div class="assess">{{item.comment}}</div>
          <div class="btn">
            <div
              class="edit"
              @click="edit(item)"
            ><img
                :src="editInfo"
                alt=""
              ></div>
            <div
              class="del"
              @click="del(item)"
            ><img
                :src="delInfo"
                alt=""
              ></div>
          </div>
        </div>
        <div class="comment">
          <el-form-item
            label="姓名："
            prop="name"
          >
            <el-input
              v-model="commentData.name"
              maxlength="100"
              style="width:200px;margin-top:-8px;"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="日期："
            prop="evaluationTime"
          >
            <el-date-picker
              v-model="commentData.evaluationTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:200px;margin-top:-8px;"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item><br>
          <el-form-item
            label=""
            prop="comment"
          >
            <el-input
              type="textarea"
              style="width:700px;margin-left:100px;margin-top:20px;"
              :rows="7"
              v-model="commentData.comment"
              placeholder="请输入评价内容"
            ></el-input>
            <el-input
              type="text"
              style="display:none"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              @click="add"
              plain
              style="margin-top:140px;margin-left:100px"
            >新增评价</el-button>
            <!-- <el-button type="info" v-if="index!==0" @click="del(item)" plain style="margin-top:140px;margin-left:100px">删除评价</el-button> -->
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>
    <div style="margin-top:80px;margin-left:35%;margin-bottom:20px">
      <el-button
        type="primary"
        @click="Submit('activityForm')"
      >{{componentType === 'edit' ? '修改' : '提交'}}</el-button>
    </div>
    <el-dialog
      title="编辑评价"
      :visible.sync="dialogVisible"
      :modal="zhezhao"
      width="35%"
    >
      <el-form
        ref="commentForm"
        :model="commentForm"
        label-width="100px"
        style="margin-top:15px"
      >
        <el-form-item
          label="姓名："
          prop="name"
        >
          <el-input
            v-model="commentForm.name"
            maxlength="100"
            style="width:400px;margin-top:-8px;"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="日期："
          prop="evaluationTime"
        >
          <el-date-picker
            v-model="commentForm.evaluationTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width:400px;margin-top:-8px;"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item><br>
        <el-form-item
          label="评价："
          prop="comment"
        >
          <el-input
            type="textarea"
            style="width:400px;margin-top:-8px;"
            :rows="7"
            v-model="commentForm.comment"
            placeholder="请输入评价内容"
          ></el-input>
          <el-input
            type="text"
            style="display:none"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="editComment"
        >确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="删除评价"
      :visible.sync="dialogVisibleDel"
      :modal="zhezhao"
      width="30%"
    >
      <span>是否删除该评价</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisibleDel = false">取消</el-button>
        <el-button
          type="primary"
          @click="delDialog"
        >确定</el-button>
      </span>
    </el-dialog>
    <version></version>
  </div>
</template>
<script type="text/ecmascript-6">
import version from '@/base/version/version'
import ShowBanner from '@/base/showBanner/showBanner'
import { mapGetters } from 'vuex'
import assessPhoto from '@/assets/images/avator.jpg'
import delInfo from '@/assets/images/del.png'
import editInfo from '@/assets/images/edit.png'
// import { quillEditor } from 'vue-quill-editor'
import { quillEditor, Quill } from 'vue-quill-editor'
import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Quill.register('modules/ImageExtend', ImageExtend)
// 富文本状态栏设置
const toolbarOptions = [
  // ['bold', 'italic', 'underline', 'strike'],
  ['bold', 'italic'],
  // ['blockquote', 'code-block'],
  // [{ 'header': 1 }, { 'header': 2 }],
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  // [{ 'script': 'sub' }, { 'script': 'super' }],
  // [{ 'indent': '-1' }, { 'indent': '+1' }],
  // [{ 'direction': 'rtl' }],
  [{ 'size': ['small', false, 'large', 'huge'] }],
  [{ 'header': [1, 2, 3, false, 5] }],
  [{ 'color': [] }, { 'background': [] }],
  // [{ 'font': [] }],
  [{ 'align': [] }],
  ['image']
  // ['clean']
]
export default {
  name: 'Activity',
  props: {
    componentType: {
      type: String,
      default: ''
    }
  },
  components: {
    ShowBanner,
    quillEditor,
    version
  },
  data () {
    return {
      assessPhoto,
      delInfo,
      editInfo,
      rules: {},
      labelPosition: 'right',
      imgLoadCover: false,
      imgLoadshareCover: false,
      imgUrlCover: '',
      imgUrlshareCover: '',
      imgUrlPhoto: '',
      spaceList: [],
      isShow: false,
      dialogVisible: false,
      dialogVisibleDel: false,
      zhezhao: false,
      commission: 1,
      activityForm: {
        title: '',
        subtitle: '',
        graphicIntroduction: '',
        activityTime: '',
        validity: '',
        price: '',
        originalPrice: '',
        space: '',
        startAt: '',
        purchasing: '',
        commissionRatio: '',
        fixedCommission: '',
        cover: '',
        shareCover: '',
        total: '',
        useRules: '',
        attention: '',
        userId: '',
        virtualEvaluation: [
          // {
          //   // photo: 'http://pcq1fv2bt.bkt.clouddn.com/b858a14a-6c0b-45c5-9aff-0db4b93dcfc7',
          //   // photoUrl: '',
          //   // name: '',
          //   // evaluationTime: '',
          //   // comment: ''
          // }
        ]
      },
      commentData: {
        name: '',
        evaluationTime: '',
        comment: ''
      },
      commentForm: {
        name: '',
        evaluationTime: '',
        comment: ''
      },
      commentList: {}, // 删除虚拟评价暂存数组
      content: '',
      // 富文本框参数设置
      editorOption: {
        modules: {
          ImageExtend: {
            loading: true,
            name: 'items',
            size: 2, // 单位为M, 1M = 1024KB
            action: '/api/file/uploadImg',
            response: (res) => {
              return res.url
            },
            headers: (xhr) => {
              xhr.setRequestHeader('Authorization', this.token)
            }, // 可选参数 设置请求头部
            start: () => {
            }, // 可选参数 自定义开始上传触发事件
            sizeError: () => {
              this.$message.error('上传图片大小不能超过 2MB!')
            }, // 图片超过大小的回调
            end: () => { }, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {
              this.$message.error('上传图片失败')
            }, // 可选参数 自定义网络错误触发的事件
            change: (xhr, formData) => {
            } // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              'image': function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      }
    }
  },
  computed: {
    activityRules () {
      let obj = {
        subtitle: [
          { required: true, message: '请输入副标题', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' }
        ],
        space: [
          { required: true, message: '请输入正确手机号码', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确手机号码' }
        ],
        graphicIntroduction: [
          { required: true, message: '请输入活动图文介绍', trigger: 'blur' }
        ],
        activityTime: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        validity: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        // cover: [
        //   { required: true, message: '请上传图片' }
        // ],
        // shareCover: [
        //   { required: true, message: '请上传图片' }
        // ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ],
        originalPrice: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ],
        total: [
          { required: true, message: '请输入总量', trigger: 'blur' },
          { pattern: /^\d{0,5}$/, message: '只可以输入整数,且最大不超过99999' }
        ],
        startAt: [
          { required: true, message: '请输入单用户起售数量', trigger: 'blur' },
          { pattern: /^\d{0,5}$/, message: '只可以输入整数,且最大不超过99999' }
        ],
        purchasing: [
          { required: true, message: '请输入单用户限购数量', trigger: 'blur' },
          { pattern: /^\d{0,5}$/, message: '只可以输入整数,且最大不超过99999' }
        ],
        useRules: [
          { required: true, message: '请输入使用规则', trigger: 'blur' },
          { max: 1000, message: '长度不可超过1000个字符', trigger: 'blur' }
        ],
        // commission: [
        //   { required: true, message: '请选择佣金形式', trigger: 'change' }
        // ],
        attention: [
          { required: true, message: '请输入注意事项', trigger: 'blur' },
          { max: 1000, message: '长度不可超过1000个字符', trigger: 'blur' }
        ]
      }
      if (this.componentType === 'add') {
        obj.cover = [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ]
        obj.shareCover = [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ]
      } else {
      }
      return obj
    },
    ...mapGetters([
      'userInfo'
    ]),
    uploadImgUrl: function () {
      return '/api/file/uploadImg?token=' + this.userInfo.token
    }
  },
  created () {
    this.token = this.userInfo.token
    console.log(this.componentType)
    if (this.componentType === 'edit') {
      this.getActivityList()
    }
  },
  mounted () {
    // if (this.activityForm.virtualEvaluation.length !== 0) {
    //   this.isShow = true
    // }
  },
  methods: {
    // 转码
    escapeStringHTML (str) {
      str = str.replace(/&lt;/g, '<')
      str = str.replace(/&gt;/g, '>')
      return str
    },
    // 排序
    sortJson (json, key) {
      for (var i = 0; i < json.length; i++) {
        for (var j = 0; j < json.length - 1; j++) {
          if (json[j][key] > json[j + 1][key]) {
            var temp = json[j]
            json[j] = json[j + 1]
            json[j + 1] = temp
          }
        }
      }
      return json
    },
    // 首页图
    handleCoverSuccess (res, file) {
      if (res.code === '40400001' || res.code === '40400002' || res.code === '40400003' || res.code === '40400004' || res.code === '40400005' || res.code === '40400006' || res.code === '40400007' || res.code === '40400008') {
        this.$message({
          message: res.message,
          type: 'error'
        })
        this.$router.push({ name: 'login' })
      }
      this.imgUrlCover = URL.createObjectURL(file.raw)
      console.log(this.imgUrlAvatar)
      if (res.code === '00000000') {
        this.$message({
          message: '首页图添加成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
      this.activityForm.cover = res.url
      this.imgLoadCover = false
      this.$refs.cover.clearValidate()
    },
    // 分享页图
    handleshareCoverSuccess (res, file) {
      if (res.code === '40400001' || res.code === '40400002' || res.code === '40400003' || res.code === '40400004' || res.code === '40400005' || res.code === '40400006' || res.code === '40400007' || res.code === '40400008') {
        this.$message({
          message: res.message,
          type: 'error'
        })
        this.$router.push({ name: 'login' })
      }
      this.imgUrlshareCover = URL.createObjectURL(file.raw)
      console.log(this.imgUrlAvatar)
      if (res.code === '00000000') {
        this.$message({
          message: '分享页图添加成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
      this.activityForm.shareCover = res.url
      this.imgLoadshareCover = false
      this.$refs.shareCover.clearValidate()
    },
    beforeCoverUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG、JPG、JPEG 格式!')
        this.imgLoadCover = false
      }
      if (!isLt2M) {
        this.$message.error('上传首页图大小不能超过 2MB!')
        this.imgLoadCover = false
      } else {
        this.imgLoadCover = true
      }
      return isJPG && isLt2M
    },
    beforeshareCoverUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG、JPG、JPEG 格式!')
        this.imgLoadshareCover = false
      }
      if (!isLt2M) {
        this.$message.error('上传分享页图大小不能超过 2MB!')
        this.imgLoadshareCover = false
      } else {
        this.imgLoadshareCover = true
      }
      return isJPG && isLt2M
    },
    // 提交
    Submit (activityForm) {
      if (this.commentData.name === '' && this.commentData.evaluationTime === '' && this.commentData.comment === '') {
        this.activityForm.virtualEvaluation.push()
        // console.log('1')
      } else {
        if (this.commentData.name === '') {
          this.$message.error('请填写完整，姓名不可为空')
          return false
        } else if (this.commentData.evaluationTime === '' || this.commentForm.evaluationTime === null) {
          this.$message.error('请填写完整，时间不可为空')
          return false
        } else if (this.commentData.comment === '') {
          this.$message.error('请填写完整，评价不可为空')
          return false
        } else {
          this.activityForm.virtualEvaluation.push({
            name: this.commentData.name,
            evaluationTime: this.commentData.evaluationTime,
            comment: this.commentData.comment
          })
        }
        // console.log('2')
      }
      let arr = this.activityForm.virtualEvaluation
      let str = []
      for (let i = 0; i < arr.length; i++) {
        str.push({
          name: arr[i].name,
          evaluationTime: arr[i].evaluationTime,
          comment: arr[i].comment,
          photo: arr[i].photo,
          sort: i
        })
      }
      if (this.commission === 1) {
        this.activityForm.fixedCommission = ''
      } else {
        this.activityForm.commissionRatio = ''
      }
      let use = this.activityForm.useRules.substr(this.activityForm.useRules.length - 1)
      if (use === '.' || use === '。') {
        this.activityForm.useRules = this.activityForm.useRules.substr(0, this.activityForm.useRules.length - 1)
      }
      let att = this.activityForm.attention.substr(this.activityForm.attention.length - 1)
      if (att === '.' || att === '。') {
        this.activityForm.attention = this.activityForm.attention.substr(0, this.activityForm.attention.length - 1)
      }
      if (this.componentType === 'edit') {
        this.$refs[activityForm].validate((valid) => {
          if (valid) {
            if (this.activityForm.fixedCommission === '' && this.activityForm.commissionRatio === '') {
              this.$message({
                message: '佣金不可为空',
                type: 'error'
              })
              return false
            }
            this.$axios.post('/api/activity/updateActivity', {
              id: this.$route.query.id,
              title: this.activityForm.title,
              subtitle: this.activityForm.subtitle,
              graphicIntroduction: this.activityForm.graphicIntroduction,
              activityTime: this.activityForm.activityTime,
              validity: this.activityForm.validity,
              price: this.activityForm.price,
              originalPrice: this.activityForm.originalPrice,
              space: this.activityForm.space,
              startAt: this.activityForm.startAt,
              purchasing: this.activityForm.purchasing,
              commissionRatio: this.activityForm.commissionRatio,
              fixedCommission: this.activityForm.fixedCommission,
              cover: this.activityForm.cover,
              shareCover: this.activityForm.shareCover,
              total: this.activityForm.total,
              useRules: this.activityForm.useRules,
              attention: this.activityForm.attention,
              virtualEvaluation: str,
              userId: this.userInfo.userId
            }).then(response => {
              const res = response.data
              console.log(res)
              if (res.code === '00000000') {
                console.log(res)
                this.$message.success(res.message)
                this.$router.push({ name: 'activityControl' })
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      } else if (this.componentType === 'add') {
        this.$refs[activityForm].validate((valid) => {
          if (valid) {
            if (this.activityForm.fixedCommission === '' && this.activityForm.commissionRatio === '') {
              this.$message({
                message: '佣金不可为空',
                type: 'error'
              })
              return false
            }
            this.$axios.post('/api/activity/addActivity', {
              title: this.activityForm.title,
              subtitle: this.activityForm.subtitle,
              graphicIntroduction: this.activityForm.graphicIntroduction,
              activityTime: this.activityForm.activityTime,
              validity: this.activityForm.validity,
              price: this.activityForm.price,
              originalPrice: this.activityForm.originalPrice,
              space: this.activityForm.space,
              startAt: this.activityForm.startAt,
              purchasing: this.activityForm.purchasing,
              commissionRatio: this.activityForm.commissionRatio,
              fixedCommission: this.activityForm.fixedCommission,
              cover: this.activityForm.cover,
              shareCover: this.activityForm.shareCover,
              total: this.activityForm.total,
              useRules: this.activityForm.useRules,
              attention: this.activityForm.attention,
              virtualEvaluation: str,
              userId: this.userInfo.userId
            }).then(response => {
              const res = response.data
              console.log(res)
              if (res.code === '00000000') {
                console.log(res)
                this.$message.success(res.message)
                this.$router.push({ name: 'activityControl' })
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      }
    },
    // 添加评价
    add () {
      if (this.commentData.name === '' || this.commentData.evaluationTime === '' || this.commentForm.evaluationTime === null || this.commentData.comment === '') {
        this.$message.error('请填写完整，每一项不可为空')
        return false
      }
      this.activityForm.virtualEvaluation.push({
        name: this.commentData.name,
        evaluationTime: this.commentData.evaluationTime,
        comment: this.commentData.comment
      })
      this.commentData = {
        name: '',
        evaluationTime: '',
        comment: ''
      }
      console.log(this.activityForm.virtualEvaluation)
    },
    // 删除评价
    del (item) {
      this.dialogVisibleDel = true
      this.commentList = item
      // console.log(item)
    },
    delDialog (item) {
      let i = this.activityForm.virtualEvaluation.indexOf(this.commentList)
      if (i !== -1) {
        this.activityForm.virtualEvaluation.splice(i, 1)
      }
      this.dialogVisibleDel = false
    },
    // 编辑评价
    edit (item) {
      this.dialogVisible = true
      this.commentForm = item
      console.log(item)
    },
    editComment (item) {
      if (this.commentForm.name === '' || this.commentForm.evaluationTime === '' || this.commentForm.evaluationTime === null || this.commentForm.comment === '') {
        this.$message.error('请填写完整，每一项不可为空')
        return false
      }
      item = this.commentForm
      this.dialogVisible = false
    },
    // 修改数据回填
    getActivityList () {
      this.$axios.post('/api/activity/showActivityById', {
        id: this.$route.query.id,
        userId: this.userInfo.userId
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          let arr = res.data.activity
          if (arr[0].commissionRatio === null) {
            this.commission = 2
          } else if (arr[0].fixedCommission === null) {
            this.commission = 1
          }
          let eva = res.data.evaluations
          let dateaAtivityTime = arr[0].activityTime.substring(2, 12) + ',' + arr[0].activityTime.substring(15, 25)
          this.activityForm.activityTime = dateaAtivityTime.split(',')
          this.activityForm.attention = arr[0].attention
          this.activityForm.commissionRatio = arr[0].commissionRatio
          this.activityForm.cumulativeSold = arr[0].cumulativeSold
          this.activityForm.cumulativeUsed = arr[0].cumulativeUsed
          this.activityForm.fixedCommission = arr[0].fixedCommission
          this.activityForm.graphicIntroduction = arr[0].graphicIntroduction
          this.activityForm.originalPrice = arr[0].originalPrice
          this.activityForm.price = arr[0].price
          this.activityForm.purchasing = arr[0].purchasing
          this.activityForm.startAt = arr[0].startAt
          this.activityForm.subtitle = arr[0].subtitle
          this.activityForm.title = arr[0].title
          this.activityForm.useRules = arr[0].useRules
          this.activityForm.total = arr[0].total
          let dateValidity = arr[0].validity.substring(2, 12) + ',' + arr[0].validity.substring(15, 25)
          this.activityForm.validity = dateValidity.split(',')
          // console.log(this.activityForm.validity)
          this.activityForm.space = arr[0].spaceTel
          this.imgUrlCover = arr[0].cover
          this.activityForm.cover = this.imgUrlCover
          this.imgUrlshareCover = arr[0].shareCover
          this.activityForm.shareCover = this.imgUrlshareCover
          let evaList = []
          for (let i = 0; i < eva.length; i++) {
            evaList.push({
              name: eva[i].name,
              comment: eva[i].comment,
              sort: eva[i].sort,
              evaluationTime: eva[i].evaluationTime,
              photo: eva[i].photo
            })
          }
          this.activityForm.virtualEvaluation = [...evaList]
          this.activityForm.virtualEvaluation = this.sortJson(this.activityForm.virtualEvaluation, 'sort')
          console.log(this.activityForm.virtualEvaluation)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.Activity
  margin 16px
  background #fff
  min-height 800px
  font-weight 600
  padding-bottom 28px
  .quill-wrap
    // width 80%
    // height 300px
    // margin-left 50px
    // .grap
    // width 1000px
    // min-height 400px
  .comment
    margin-left -100px
    margin-top 80px
  .invent
    border-bottom 1px solid rgba(0, 0, 0, 0.1)
    margin-bottom 20px
    .user
      height 40px
      position relative
      img
        width 40px
        height 40px
        border-radius 50%
      .userTitle
        display inline-block
        .title
          font-size 10px
          position absolute
          top -5px
          // left 0
        .date
          font-size 8px
      .titleTwo
        position absolute
        top 95px
        left 44px
    .btn
      display inline-block
      float right
      display flex
      flex-direction row
      flex-wrap wrap
      margin-top -35px
      .edit
        margin-right 10px
        img
          width 20px
          height 20px
      .del
        img
          width 20px
          height 20px
</style>
<style>
strong {
  font-weight: bold !important;
}
strong > em {
  font-weight: bold !important;
}
.ql-editor {
  min-height: 400px !important;
  border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
}
.ql-picker-label {
  display: block !important;
  line-height: 24px;
}
.ql-picker-label::before {
  display: block !important;
}
.ql-tooltip {
  z-index: 100;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
